<template>
	<view>
		<infoswiper :list="infoList.images"></infoswiper>
		<view class="information-box">
			<view class="video-cont fbox">
				<view class="left fbox fbox-acenter fbox-jcenter fbox-column">
					<view class="head-box">
						<image class="head" :src="infoList.avatar" mode=""></image>
						<image class="card" v-if="infoList.cardId" @click="card(infoList.cardId)"
							src="/static/information/card.png"></image>
					</view>
				</view>
				<view class="right">
					<view class="title fbox fbox-end fbox-jbetween">
						<text>{{infoList.nickname}}</text>
						<image src="/static/information/card.png" v-if="infoList.cardId" @click="card(infoList.cardId)"
							mode="widthFix"></image>
					</view>
					<view class="time-eye f28 fbox fbox-acenter fbox-jbetween">
						<view class="">
							{{infoList.time}}
						</view>
						<view class="fbox fbox-acenter">
							<image src="/static/mu.png" mode="widthFix"></image>
							<text style="color: #6f6f6f;">{{infoList.showNum}}</text>
						</view>
					</view>
					<view class="addres-box">
						<view class="item fbox fbox-acenter">
							<image src="/static/address.png" mode="widthFix"></image>
							<text class="color3 ellipsis">{{infoList.address}}</text>
						</view>
						<view class="item fbox fbox-acenter">
							<image src="/static/distance.png" mode="widthFix"></image>
							<text class="color3 ellipsis">{{infoList.distance}}</text>
						</view>
					</view>
				</view>

			</view>
			<view class="info-box  fbox fbox-acenter fbox-jbetween">
				<view class="info">
					<view class="info-item fbox fbox-acenter">
						<image src="/static/information/phone.png" mode="widthFix"></image>
						<text class="ellipsis">{{infoList.mobile}}</text>
					</view>
					<view class="info-item fbox fbox-acenter">
						<image src="/static/information/phonebook.png" mode="widthFix"></image>
						<text class="ellipsis">{{infoList.whatsapp}}</text>
					</view>
					<view class="info-item fbox fbox-acenter">
						<image src="/static/information/wx.png" mode="widthFix"></image>
						<text class="ellipsis">{{infoList.wechat}}</text>
					</view>
				</view>
				<view class="chat-box fbox fbox-column fbox-acenter fbox-jcenter">
					<image src="/static/information/info.png" mode="widthFix"></image>
					<text>{{ $t('information.chat') }}</text>
				</view>
			</view>
			<view class="highlight">
				<view class="title fbox fbox-acenter">
					<image src="/static/information/line.png" mode="widthFix"></image>
					<text>{{ $t('information.Summary') }}</text>
				</view>
				<view class="highlight-cont">
					<u-parse class="parse" :html="infoList.title" @linkpress="onlinkTap"></u-parse>
				</view>
			</view>
			<view class="highlight">
				<view class="title fbox fbox-acenter">
					<image src="/static/information/line.png" mode="widthFix"></image>
					<text>{{ $t('information.Details') }}</text>
				</view>
				<view class="highlight-cont">
					<u-parse class="parse" :html="infoList.content" @linkpress="onlinkTap"></u-parse>
				</view>
			</view>
			<zero-back-top :scrollTop="scrollTop"></zero-back-top>
			<report :id="infoList.id"></report>
			<likes type="information" :isLike="infoList.isLike" :id="id" :likeAvatars="likeList" @init="init"
				:likeNum="infoList.likeNum"></likes>
			<comments type="info" :id="id" @init="getcomment" :commentList="commentList" @getcomment="getcomment">
			</comments>
			<tabbar type="information" :lat="infoList.lat" :lng="infoList.lng" :isCollection="infoList.isCollection"
				@init="init" :id="id"></tabbar>
		</view>
	</view>
</template>

<script>
	import infoswiper from "@/components/infoswiper.vue"
	import report from "@/components/report.vue"
	import likes from "@/components/likes.vue"
	import comments from "@/components/comments.vue"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			infoswiper,
			report,
			likes,
			comments,
			tabbar
		},
		data() {
			return {
				mask: false,
				id: '',
				infoList: [],
				likeList: [],
				scrollTop: 0,
				cancelText: this.$t('user.cancel'),
				confirmText: this.$t('user.yes'),
				content: this.$t('user.open'),
				title: this.$t('user.prompt'),
				show: false,
				urllinke: '',
				commentList: []
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(option) {
			this.id = option.id
			this.init()
			this.getcomment()
		},
		methods: {
			card(id) {
				uni.navigateTo({
					url: '/pages/user/card/details/index?id=' + id
				})
			},
			getcomment() {
				const params = {
					map: 'applet_comment_list',
					aid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.commentList = res.data.data
					} else {

					}
				})
			},
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
				plus.runtime.openURL(this.urllinke)
			},
			onlinkTap(e) {
				e.ignore()
				console.log(e)
				this.show = true
				this.urllinke = e.href
			},
			init() {
				const params = {
					map: 'applet_city_post_details',
					pid: this.id,
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.infoList = res.data.data
						let array = []
						res.data.data.likeList.map(item => {
							let img = {
								avatar: item.avatar
							}
							array.push(img)
						})
						this.likeList = array
						console.log(this.likeList.img)
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.information-box {
		margin-top: -100rpx;
		z-index: 2;
		position: absolute;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background-color: #FFFFFF;

		.highlight {
			padding: 0rpx 30rpx 30rpx;

			.title {
				padding: 20rpx 0;
				font-weight: 600;

				image {
					width: 8rpx;
					margin-right: 20rpx;
				}

				text {
					font-size: 32rpx;
				}
			}

			.highlight-cont {
				word-break: break-all;
				font-size: 24rpx;
				color: $u-content-color;
			}
		}



		.info-box {
			padding: 0 30rpx;

			.info {
				.info-item {
					margin-bottom: 20rpx;

					image {
						width: 32rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
					}
				}
			}

			.chat-box {
				background-color: #3cc9fe;
				width: 73rpx;
				height: 73rpx;
				border-radius: 50%;
				color: #fff;

				image {
					width: 24rpx;
					color: #FFFFFF;
				}

				text {
					font-size: 24rpx;
				}
			}
		}

		.video-cont {
			padding: 30rpx;

			.left {
				.title {
					text {
						font-size: 32rpx;
						color: #000000;
						font-weight: 600;
					}
				}

				margin-right: 20rpx;

				.head-box {
					width: 100rpx;
					position: relative;

					.head {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.card {
						position: absolute;
						width: 50rpx;
						height: 40rpx;
						left: 0;
						right: 0;
						margin: auto;
						bottom: 0;
					}
				}
			}

			.right {
				width: 82%;

				.title {
					image {
						width: 80rpx;
					}
				}

				.time-eye {
					margin-top: 5rpx;
					color: #6f6f6f;

					image {
						width: 40rpx;
						margin-right: 10rpx;
					}
				}

				.addres-box {
					.item {
						margin-top: 10rpx;

						text {
							width: 80%;
							font-size: 24rpx;
							color: #6f6f6f;
						}

						image {
							width: 20rpx;
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}
</style>
